<template>
	<div class="container">
		<header-Bar></header-Bar>
		<div class="body">
			<page-body>
				<div class="viewHomework">
					<div class="rowStyle">
						<span class="bigFontStyle">科目:</span>&nbsp;&nbsp;
						<span class="smallFontStyle">{{subject}}</span>
					</div>
					<div class="rowStyle">
						<span class="bigFontStyle">标题:</span>&nbsp;&nbsp;
						<span class="smallFontStyle">{{title}}</span>
					</div>
					<div class="rowStyle">
						<span class="bigFontStyle">发布日期:</span>&nbsp;&nbsp;
						<span class="smallFontStyle">{{createTime}}</span>
					</div>
					<div class="rowStyle">
						<span class="bigFontStyle">截止日期:</span>&nbsp;&nbsp;
						<span class="smallFontStyle">{{deadline}}</span>
					</div>
					<div class="contentStyle">
						<span class="bigFontStyle">内容:</span>
						<br>
						<div class="contBox">
							<span class="smallFontStyle">
								{{insertContent}}
							</span>
						</div>
					</div>
					<div class="rowStyle">
						<span class="bigFontStyle">提交方式:</span>&nbsp;&nbsp;
						<span class="smallFontStyle">{{commit}}</span>
					</div>
					<div class="buttonStyle">
						<el-button type="primary" plain  v-on:click="backStuHome">返回</el-button>
						<!-- <button class="buttonSize">返回</button> -->
					</div>
				</div>
			</page-body>
		</div>
	</div>
</template>

<script>
import HeaderBar from '@/components/headerBar/HeaderBar';
import PageBody from '@/components/pageBody/PageBody';
import http from '../../util/http';

export default {
	name: 'Home',
	data() {
		return {
			subject: '',
			title: '',
			createTime: '',
			deadline: '',
			commit: '',
			insertContent: '',
		};
	},
	components: {
		HeaderBar,
		PageBody,
	},
	methods: {
		backStuHome() {
			if (window.localStorage.getItem('userRole') == 1) {//eslint-disable-line
				this.$router.push('/adaHome');
			} else if (window.localStorage.getItem('userRole') == 0) {//eslint-disable-line
				this.$router.push('/stuHome');
			}
		},
		getHomework() {
			http.get(`/homeworkAPI/getHomeworkById?id=${window.localStorage.getItem('homeworkID')}`)
			.then((res) => {
				const result = res.resultMap.getHomeworkById;
				this.subject = result.subject_name;
				this.title = result.title;
				this.createTime = result.create_date;
				this.deadline = result.deadline;
				this.commit = result.putway;
				this.insertContent = result.content;
			})
			.catch((error) => {
				console.log(error);
			});
		},
	},
	mounted() {
		this.getHomework();
	},
};
</script>

<style scoped>
.container{
	background-color: #FAACA8;
	background-image: linear-gradient(19deg, #66cccc 0%, #FAACA8 50%,#DDD6F3 100%);
	background-size: 700%;
	animation: bganimation 15s infinite;
}
@keyframes bganimation {
	from {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	to {
		background-position: 0% 50%;
	}
}
.body{
  display: block;
  padding-top: 2.5rem;
}
.viewHomework{
	width: 13rem;
	height: 15rem;
	/* background-color: white; */
	box-shadow: 0.1rem 0.06rem 0.15rem #888;
	background-image: url(~@/assets/img/contentback/1-1PFQJ512.jpg);
	margin:  auto;
}
.rowStyle{
	padding: 1rem 0 0 1rem;
}
.contentStyle{
	padding: 1rem 0 .5rem 1rem;
	width: 9rem;
	height: 3rem;
	/* background-color: #66cccc; */
}
.buttonStyle{
	width: 92%;
	/* background-color: red; */
	margin: 1rem 0 0 5.5rem;
	/* padding: 1rem 0 0 1rem; */
	/* text-align: center;  */
}
.el-button {
	color: white;
	background-color: #66cccc;
}
.contBox{
	overflow:auto;
	width: 9rem;
	height: 4.1rem;
	margin: -.46rem 0 1rem 1.5rem;
}
.bigFontStyle{
	font-size:0.53rem;
	font-family:"\5FAE\8F6F\96C5\9ED1";
	color: #66CCCC
}
.smallFontStyle{
	font-size:0.45rem;
	font-family:"\5FAE\8F6F\96C5\9ED1";
}
.buttonSize{
	border: none;
	height: 1rem;
	width: 2rem;
	background-color: #66cccc;
	color: white;
	font-size: 0.4rem;
}


</style>
